<template>
  <div>
    <template v-for="(item, index) in getOptions" :key="index">
      <span>{{ index != 0 ? "、" : "" }}{{ item.name }}</span>
    </template>
  </div>
</template>
<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    options: any[];
    value: any;
  }>(),
  {
    options: () => [],
  }
);

const values = computed(() => {
  if (props.value !== null && typeof props.value !== "undefined") {
    return Array.isArray(props.value)
      ? props.value
      : String(props.value).split(",");
  } else {
    return [];
  }
});

const getOptions = computed(() => {
  return props.options.filter((item) => values.value.includes(item.value));
});
</script>
